import React, { useEffect, useState } from 'react'
import { get } from '../../../util/get'
import { message, Card, Row, Col, Tag, Switch, Pagination, Button } from 'antd';
import {
  ShopOutlined
} from '@ant-design/icons';
import { post } from '../../../util/post'
import { useNavigate } from 'react-router-dom';
import style from "./index.module.css"
const { Meta } = Card
export default function Manage() {
  const [list, setList] = useState([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const navigate = useNavigate()
  const token = localStorage.getItem('TOKEN')
  const getMyShop = async () => {
    const res = await get(`/shop/shop/myShop?page=${page}&limit=8`, token)
    const { page: { list, totalCount } } = res.data
    // console.log(totalCount,page)
    if (res.data.code === 0) {
      setList(list)
      setTotal(totalCount)
    }
    else message.error(res.data.msg);
  }
  useEffect(() => {
    const rolesArr = localStorage.getItem('roles').split(',')
    if(!rolesArr.includes('SHOP'))
        navigate('/beshop')
    else {
      getMyShop()
    }
  }, [token, page])

  const handleChange = async (data, id) => {
    const res = await post('/shop/shop/update', { id, status: Number(data) },token)
    if (res.data.code === 0) {
      message.success(res.data.msg)
      getMyShop()
    }
    else message.error(res.data.msg)
  }

  return (
    <div>
      <Button type="primary" shape="round" icon={<ShopOutlined />} className={style.button} onClick={() => {
        navigate('/settle')
      }}>我要开店</Button>
      <Row gutter={[8, 16]} className={style.storelist}>
        {
          list?.map(item => {
            return (
              <Col span={6} key={item.id} >
                <Card
                  hoverable
                  style={{
                    width: 250,
                    height: 400
                  }}
                  cover={
                    <img
                      // height={250}
                      style={{width:250,height:250}}
                      onClick={
                        () => {
                          navigate(`/store/${item.id}`)
                        }
                      }
                      // width={250}
                      alt="example"
                      src={item.image} />}
                >
                  <Meta title={item.name} description={
                    <>
                      <div>地址：{item.address}</div>
                      <div>电话：{item.phone}</div>
                      <div>营业状态：
                        <Switch onChange={(a) => handleChange(a, item.id)} checked={Boolean(item.status)}></Switch>
                      </div>
                    </>
                  } />
                </Card>
              </Col>
            )
          })
        }
      </Row>
      <Pagination
        className={style.pagination}
        current={page} defaultPageSize={8}
        total={total} onChange={page => {
          setPage(page);
        }} />
    </div>
  )
}
